<template>
  <div class="newContent" id="newContent">
    <div class="newContentHead">
      <div class="publish_content">
        <span>内容模型：</span>
        <span>{{ route.query.modelName }}</span>
        <div class="publish_actions">
          <a-button v-if="(contentStatus !== 5 || isCanEdit) && contentStatus != 3" :style="{ 'margin-left': '8px' }"
            @click="immediatelyRecord(1)" :disabled="!btnPerm.includes('saveDraftAble')">存为草稿</a-button>
          <!-- <a-button v-if="contentStatus == 3" class="addButton" type="primary" :style="{ 'margin-left': '8px' }"
            disabled>审核中</a-button> -->
          <!-- <a-button v-else-if="contentStatus == 6" :style="{ 'margin-left': '8px' }" class="addButton" type="primary"
            disabled danger>审核不通过</a-button> -->
          <div class="publish_action">
            <!-- <a-button class="addButton" :style="{ 'margin-left': '8px' }">
              发布
            </a-button> -->
            <!-- workflow-plugin start -->
            <a-button @click="reviewRecord()"
              v-if="isWorkflow && contentStatus !== 5 && contentStatus != 3">提交审核</a-button>
            <!-- workflow-plugin end -->
            <a-button @click="immediatelyRecord(5)" :disabled="!btnPerm.includes('publishAble')"
              v-if="!isWorkflow && (contentStatus !== 5 && isCanEdit)">立即发布</a-button>
            <a-button @click="immediatelyRecord(4)"
              v-if="!isWorkflow && (contentStatus !== 5 || isCanEdit)">待发布</a-button>
          </div>
          <a-button :style="{ 'margin-left': '8px' }" @click="offlineRecord([route.query.contentId])"
            v-if="contentStatus === 5">下线</a-button>
        </div>
      </div>

      <div class="newContentHead_right">
        <a-button :disabled="previewPerm" @click="viewPage" v-if="route.query.contentId">预览</a-button>

        <a-dropdown v-if="route.query.contentId">
          <a-button :disabled="!isCanEdit" class="addButton" type="primary" :style="{ 'margin-left': '8px' }">
            更多操作
            <i class="iconfont icon-down" style="font-size: 24px; color: #ffffff; margin-left: 4px" />
          </a-button>
          <template #overlay>
            <a-menu v-if="isCanEdit">
              <a-menu-item :disabled="!btnPerm.includes('relatedContentAble')">
                <a @click="correlationRecord()">相关内容</a>
              </a-menu-item>
              <a-menu-item :disabled="!btnPerm.includes('scanHistoryAble')">
                <a @click="operatingRecord()">操作记录</a>
              </a-menu-item>
              <a-menu-item :disabled="!btnPerm.includes('versionAble')">
                <a @click="versionRecord()">内容版本</a>
              </a-menu-item>
              <a-menu-item v-if="contentStatus !== 5" :disabled="!btnPerm.includes('deleteAble')">
                <a @click="deleteRecord()">删除</a>
              </a-menu-item>
              <a-menu-item v-if="contentStatus === 5">
                <a @click="fetchContentFile([route.query.contentId])">归档</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <a-button :style="{ 'margin-left': '8px' }" @click="toggleFullscreen">
          {{ !fullScreen ? "全屏" : "取消全屏" }}</a-button>
      </div>
    </div>
    <div class="contentCompsBox">
      <div class="contentComps_left">
      
        <a-form :model="contentComps_left" autoComplete="off" ref="baseForm_left_ref" id="contentComps_left">
          <template v-for="(item, index) in contentComps_left">
            <div class="img-item" v-if="item.componentName === 'isDownloadImag'">
              <component :is="comps[item.componentName]" :index="index" :element="item" v-if="item" />
            </div>
            <div class="basic-item" v-if="item.componentName && item.componentName !== 'isDownloadImag'">
              <component :is="comps[item.componentName]" :index="index" :element="item" :formNamePath="[index, 'value']"
                @getSummary="getSummary" v-if="item" />
            </div>
            <div class="basic-item basic-item_upload_list" v-else-if="item.upload_list">
              <div class="upload_list" v-for="(upload_list, upload_list_index) in item.upload_list">
                <component :is="comps[upload_list.componentName]" :index="upload_list_index" :element="upload_list"
                  :formNamePath='[index, "upload_list", upload_list_index, "value"]' v-if="upload_list" />
              </div>
            </div>
            <div class="basic-item basic-item_upload_list" v-else-if="item.uedit_list">
              <a-tabs v-model:activeKey="contentActiveKey" hide-add type="editable-card">
                <a-tab-pane v-for="(uedit_list, uedit_list_index) in item.uedit_list" :key="uedit_list_index"
                  :tab="uedit_list.tabLabel" :closable="false">
                  <div class="z-preview z-preview_list">
                    <component :is="comps[uedit_list.componentName]" :index="uedit_list_index" :element="uedit_list"
                      ref='editor' v-if="uedit_list.formSetting">
                    </component>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
            <div class="basic-item basic-item_item_list" v-else-if="item.item_list">
              <div class="item_list" v-for="(item_list, item_list_index) in      item.item_list     ">
                <component :is="comps[item_list.componentName]"
                  :formNamePath="[index, 'item_list', item_list_index, 'value']" :index="item_list_index"
                  :element="item_list" v-if="item_list" @getSummary="getSummary" />
              </div>
            </div>
          </template>
        </a-form>
        <div :style="{'height': contentComps_leftH}" class="noEdit" v-if="!isCanEdit"></div>
      </div>
      <div class="contentComps_right" v-if="contentComps_right.length">
        <a-form :model="contentComps_right" autoComplete="off" ref="baseForm_right_ref" id="contentComps_right">
          <template v-for="(item, index) in contentComps_right">
            <div class="basic-item">
              <component :is="comps[item.componentName]" :index="index" :element="item" v-if="item"
                :formNamePath="[index, 'value']" @getSummary="getSummary" :baseFrom_ref_right="baseForm_right_ref" />
            </div>
          </template>
        </a-form>
        <div :style="{'height': contentComps_rightH}" class="noEdit" v-if="!isCanEdit"></div>
      </div>
    </div>
    <operatingRecordmodel v-if="isoperatingVisible" :isVisible="isoperatingVisible" @handleCancle="handleCancle"
      :contentId="contentId"></operatingRecordmodel>
    <versionModel :isVisible="isversionModelVisible" :contentId="contentId" @handleCancle="handleCancle"
      @fetchContentVersionRestore="fetchContentVersionRestore">
    </versionModel>
    <!-- workflow-plugin start -->
    <review :isVisible="isreviewVisible" :contentId="(route.query.channelId as any || '')" @handleOk="handleOk"
      @handleCancle="handleCancle" v-if="isreviewVisible"></review>
    <!-- workflow-plugin end -->
    <correlationModel v-if="isCorrelationVisible" :isVisible="isCorrelationVisible" :contentId="contentId"
      @handleOk="handleOk" @handleCancle="isCorrelationVisible = false"></correlationModel>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  defineComponent,
  createVNode,
  watch,
} from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import { dataSourceType } from "@/type";
import request from "@/api/index";
import { Modal, message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import operatingRecordmodel from "./operatingRecord.vue";
import versionModel from "./versionModel.vue";
import correlationModel from "./correlationModel.vue";
/*workflow-plugin start*/
import review from "./review.vue";
/*workflow-plugin end*/
import { comps } from "@/components/draggable/exportComp";
import screenfull from "screenfull";
import { routerPerm } from '@/utils/common';
const btnPerm = ref<any[]>([]);

//data
let isoperatingVisible = ref(false); //控制是否展示操作记录对话框
let isversionModelVisible = ref(false); //控制是否展示内容版本对话框
let isreviewVisible = ref(false); //控制是否展示提交审核对话框
let modelData = reactive<dataSourceType>({});
let detailData = reactive<dataSourceType>({});
const contentActiveKey = ref<number>(0);
const isCanEdit = ref<boolean>(true);
let instanceItemsLeft = ref<any[]>([]);
let instanceItemsRight = ref<any[]>([]);
let contentComps_left = ref<any[]>([]);
let contentComps_right = ref<any[]>([
  // { componentName: "parentColumn", },
  // { componentName: "columnName", },
  // { componentName: "accessPath", },
]);
const route = useRoute() as any;
const router = useRouter();
const uedit_listKey = ref<string[]>([]);
const uedit_listValue = ref<any[]>([]);
const fullScreen = ref<Boolean>(false);
const isWorkflow = ref<Boolean>(false);
const contentStatus = ref<number>();
const previewPerm = ref<Boolean>(false); // 预览按钮权限
const previewUrl = ref<any>(''); // 预览url
const contentComps_leftH = ref<any>(null);
const contentComps_rightH = ref<any>(null);

const isCorrelationVisible = ref(false); //控制是否展示排序对话框
let contentId = ref<any>(route.query.contentId);
let UEditIndex = ref<number>(0);
let editor = ref<any[]>([]);
const toggleFullscreen = () => {
  if (screenfull.isEnabled) {
    // screenfull.toggle();
    fullScreen.value = !fullScreen.value;
    if (fullScreen.value) {
      document.getElementById("newContent")?.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  }
};
// 
const baseForm_left_ref = ref();
const baseForm_right_ref = ref();


// 归档
const fetchContentFile = async (ids: any) => {
  request
    .fetchContentFile({ ids })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
        router.push({ path: '/content/index', query: { channelId: route.query.channelId } });
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};


// 下线
const offlineRecord = async (ids: any) => {
  request
    .fetchContentOffline({ ids })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
        router.push({ path: '/content/index', query: { channelId: route.query.channelId } });
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

// 立即发布
const immediatelyRecord = async (status: number) => {
  if (baseForm_left_ref.value) {
    if (baseForm_right_ref.value) {
      baseForm_left_ref.value.validate()
        .then(() => {
          baseForm_right_ref.value.validate().then(() => {
            updateData(status);
          }).catch((err: any) => {
          })
        }).catch((err: any) => {
          scrollToErr();
          baseForm_right_ref.value.validate().then(() => {
          }).catch((err: any) => {
            scrollToErr();
          })
        })
    } else {
      baseForm_left_ref.value.validate().then(() => {
        updateData(status);
      }).catch((err: any) => {
        scrollToErr();
        console.log(err, 'baseForm_right_ref')
      })
    }
  } else if (baseForm_right_ref.value) {
    baseForm_right_ref.value.validate().then(() => {
      updateData(status);
    }).catch((err: any) => {
      scrollToErr();
    })
  }

};
const updateData = (status: number) => {
  let params = {
    bornType: 0,
    id: route.query.contentId || "",
    channelId: route.query.channelId,
    contentTypeIds: [],
    isAutoPublish: true,
    modelInstance: {
      instanceItems: instanceItemsLeft.value.concat(instanceItemsRight.value),
      modelId: route.query.id,
    },
    orgId: "",
    siteId: "",
    status,
  };
  params.modelInstance.instanceItems.forEach((item: any) => {
    if(item.field == 'topTime') {
      if(Array.isArray(item.value)) {
        let obj = {
        startTime: item.value[0],
        endTime: item.value[1],
        originValue: item.value,
      }
      item.value = obj
      } else {
        item.value = {}
      }
    }
  })
  console.log(params,'params');
  request[
    route.query.contentId && status == 5
      ? "fetchContentUpdateAndPubish"
      : route.query.contentId
        ? "fetchContentUpdate"
        : "fetchContentSave"
  ](params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        router.push({ path: '/content/index', query: { channelId: route.query.channelId } });
        message.success(res.message);
        getDetailAll(); // 重新调取详情接口;
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });

}
// 预览
const viewPage = () => {
  if (previewUrl.value) {
    window.open(previewUrl.value)
  } else {
    console.log('预览链接不存在');
    message.error('预览链接不存在');
  }
};

// 待发布
const waitRecord = () => { };

// 相关内容
const correlationRecord = () => {
  isCorrelationVisible.value = true;
};
// 操作记录
const operatingRecord = () => {
  isoperatingVisible.value = true;
};
// 内容版本
const versionRecord = () => {
  isversionModelVisible.value = true;
};
const deleteRecord = async () => {
  Modal.confirm({
    content: "您确定将选中的内容移入回收站？",
    centered: true,
    icon: createVNode("i", {
      class: "iconfont icon-warn warning_ICON",
    }),
    cancelText: "取消",
    okText: "确定",
    onOk: async () => {
      fetchContentRecycle();

    },
    onCancel() { },
  });
};
// 提交审核弹窗
/*workflow-plugin start*/
const reviewRecord = () => {
  isreviewVisible.value = true;
};
/*workflow-plugin end*/
// 确定提交审核
const handleOk = (e: MouseEvent) => {

  isreviewVisible.value = false;
  let params = {
    ...e,
    bornType: 0,
    id: route.query.contentId || "",
    channelId: route.query.channelId,
    contentTypeIds: [],
    modelInstance: {
      instanceItems: instanceItemsLeft.value.concat(instanceItemsRight.value),
      modelId: route.query.id,
    },
    orgId: "",
    siteId: "",
    status,
  };
  params.modelInstance.instanceItems.forEach((item: any) => {
    if(item.field == 'topTime') {
      if(Array.isArray(item.value)) {
        let obj = {
        startTime: item.value[0],
        endTime: item.value[1],
        originValue: item.value,
      }
      item.value = obj
      } else {
        item.value = {}
      }
    }
  })
  request
    .instanceContentStart(params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        getDetailAll(); // 重新调取详情接口;
        message.success(res.message);
        router.push({ path: '/content/index', query: { channelId: route.query.channelId } });
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

// 删除
const fetchContentRecycle = async () => {
  request
    .fetchContentRecycle({ ids: [route.query.contentId] })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        router.push({ path: '/content/index', query: { channelId: route.query.channelId } });
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};
const handleCancle = () => {
  isoperatingVisible.value = false;
  isversionModelVisible.value = false;
  isreviewVisible.value = false;
};
//获取详情模型
const getDetailModel = async () => {
  let params = {
    id: route.query.id,
  };
  const data = await request.fetchColumnModelDetail(params);
  return new Promise((resolve, reject) => {
    resolve(data);
  });
};

//获取详情数据
const getDetailData = async () => {
  let params = {
    id: route.query.contentId,
  };
  const data = await request.fetchContentDetail(params);
  nextTick(() => {
    contentStatus.value = data.status;
    fetchChannelHasWorkflow(data.channelId);
  })

  return new Promise((resolve, reject) => {
    resolve(data);
  });
};
const fetchChannelHasWorkflow = async (channelId: any) => {
  const data = await request.fetchChannelHasWorkflow({ id: channelId });
  nextTick(() => {
    isWorkflow.value = data;
  })

};
//peomise.all获取两个接口的数据
const getDetailAll = () => {
  const model = getDetailModel();
  const data = route.query.contentId ? getDetailData() : "";
  const arr = route.query.contentId ? [model, data] : [model];
  Promise.all(arr)
    .then((result: any) => {
      previewUrl.value = result[1]?.previewUrl || '';
      const modelJson: any = result[0];

      const detailJson: any = result.length > 1 ? result[1] : {};
      console.log(detailJson, 'detailJson')
      isCanEdit.value = detailJson?.isCanEdit === false ? false : true;
      modelData = JSON.parse(modelJson.enableJson);
      modelData = modelData
        ? modelData
        : { contentComps_left: [], contentComps_right: [] };
      contentComps_left.value = [];
      contentComps_right.value = [];
      let valueData = detailJson.instance?.instanceItems || [];
      modelData.contentComps_left?.length &&
        modelData.contentComps_left.forEach((item: dataSourceType, getSomeIndex: number) => {
          if (item.uedit_list) {
            // 富文本相关
            UEditIndex.value = getSomeIndex;
            let list = item.uedit_list;
            let findIsDownloadImag =
              valueData.find(
                (vData: dataSourceType) => vData.field == "isDownloadImag"
              ) || {};
            let data: any = {
              ...item.settingObj,
              componentName: item.settingObj.param,
              value: findIsDownloadImag.value || false,
            };
            contentComps_left.value.push(data);
            list.forEach((ue_list: any) => {

              let key_value =
                valueData.find((vData: dataSourceType) => ue_list.param == vData.field) ||
                {};
              ue_list.value = key_value.value ? key_value.value[ue_list["tabLabel"]] : "";
              if (ue_list.rule.validator) {
                ue_list.rule.validator = new Function(
                  "return " + ue_list.rule.validator
                )();
              }
            });
            contentComps_left.value.push(item);
          } else if (item.upload_list) {
            // 上传类组件
            item.upload_list.forEach((up_list: any) => {
              valueData.forEach((vData: dataSourceType) => {
                if (up_list.param == vData.field) {

                  vData.value ? up_list.value = vData.value : ''
                }
              })
              if (up_list.rule.validator) {
                up_list.rule.validator = new Function(
                  "return " + up_list.rule.validator
                )();
              }
            });
            contentComps_left.value.push(item);
          } else if (item.item_list) {
            let list = item.item_list;
            let key_value =
              valueData.find((vData: dataSourceType) => item.param == vData.field) || {};
            list.forEach((it_list: any) => {
              let key_value =
                valueData.find((vData: dataSourceType) => it_list.param == vData.field) ||
                {};
              if (key_value && key_value.value) {
                it_list.value = key_value.value;
              }

              if (it_list.rule.validator) {
                it_list.rule.validator = new Function(
                  "return " + it_list.rule.validator
                )();
              }
            });
            contentComps_left.value.push(item);
          } else if (item.param) {
            // 普通类型的；
            let key_value: dataSourceType =
              valueData.find((vData: dataSourceType) => item.param == vData.field) || {};
            console.log(item.param, 'item.param')
            let data: any = {
              ...item,
              // componentName: item.param, //万一param是可以更改的呢？
            };
            if (key_value && key_value.value) {
              data.value = key_value.value;
            }
            if (data.rule.validator) {
              data.rule.validator = new Function("return " + data.rule.validator)();
            }
            contentComps_left.value.push(data);
          }
        });
      modelData.contentComps_right?.length &&
        modelData.contentComps_right.forEach((item: dataSourceType) => {
          let key_value =
            valueData.find((vData: dataSourceType) => item.param == vData.field) || {};
          let data: any = {
            ...item,
          };
          if (key_value && key_value.value) {
            data.value = key_value.value;
          }
          if (data.rule.validator) {
            data.rule.validator = new Function("return " + data.rule.validator)();
          }
          contentComps_right.value.push(data);
        });
        setTimeout(() => {contentComps_rightH
      const contentComps_leftBox = document.getElementById('contentComps_left');
      const contentComps_rightBox = document.getElementById('contentComps_right');
    if (contentComps_leftBox) {
      contentComps_leftH.value = getComputedStyle(contentComps_leftBox, null).height;
      // console.log(contentComps_leftH.value,'contentComps_leftH111111111111111111111111');
    }
    if (contentComps_rightBox) {
      contentComps_rightH.value = getComputedStyle(contentComps_rightBox, null).height;
      // console.log(contentComps_rightH.value,'contentComps_rightH111111111111111111111111');
    }
  }, 5000);
    })
    .catch((error) => {
      console.log(error);
    });
};
// 获取摘要
const getSummary = (val: any) => {
  let path = val;

  let content = getCurrentContent();

  request.getContentSummary(content).then((res: any) => {
    if (res.code == '00000 00000') {
      if (path?.length == 2) { // 摘要组件只能是左右的非合并的组件
        if (contentComps_left.value[path[0]].componentName == 'summary') {
          contentComps_left.value[path[0]].value = res.data;
        } else if (contentComps_right.value[path[0]].componentName == 'summary') {
          contentComps_right.value[path[0]].value = res.data;
        }
      } else {
        contentComps_left.value[path[0]][path[1]][path[2]].value = res.data;
      }
      message.success(res.message);
    } else {
      message.error(res.message);
    }

  })
}
// 获取当前正文
const getCurrentContent = () => {
  // [0].editor.editor.contentTxt
  if (editor.value && editor.value.length) {
    return editor.value[contentActiveKey.value].ueditor.editor.REFS()._getContentTxt()
  } else {
    return ''
  }

}
const scrollToErr = () => {// 错误提醒，防止页面过长，用户看不到错误提示，把错误提示自动滚动到可视区域
  setTimeout(() => {
    let errors = document.querySelector(".ant-form-item-explain-error");
    errors?.scrollIntoView({
      behavior: "smooth",
      block: "end",
    });
  }, 40);
}
// 切换本版，数据及时更新
const fetchContentVersionRestore = () => {
  getDetailAll();
  fetchChannelHasWorkflow(route.query.channelId);
}
const addInstanceItems = (data: dataSourceType) => {
  if (data.upload_list) {
    // 上传类
    let list = data.upload_list;
    list.forEach((item: dataSourceType) => {
      let obj: dataSourceType = {
        field: item.param,
        value: [],
      };
      if (item.value.length) {
        obj.value = item.value;
      }
      instanceItemsLeft.value.push(obj);
    });
  } else if (data.uedit_list) {
    //正文类
    let list = data.uedit_list;
    let valueObj: dataSourceType = {};
    let obj: dataSourceType = { field: "", value: {} };
    list.forEach((item: any) => {
      obj.field = item.param;
      valueObj[item.tabLabel] = item.value;
      obj.value = valueObj;
    });
    instanceItemsLeft.value.push(obj);
  } else if (data.item_list) {
    // 合并类
    let list = data.item_list;
    list.forEach((item: dataSourceType) => {
      console.log(item, '2121');
      //定义数据类型
      let type = Array.isArray(item.value)
        ? "array"
        : typeof item.value == "object"
          ? "object"
          : "string";
      let obj: dataSourceType = {
        field: item.param,
        value: type == "array" ? [] : type == "object" ? {} : "",
      };
      obj.value = item.value;

      instanceItemsLeft.value.push(obj);
    });
  }
  // let obj: dataSourceType = { field: "", value: {} };
  // obj.field = list[0].param;

  // let valueObj: dataSourceType = {};
  // list.length &&
  //   list.forEach((item: any) => {
  //     console.log(item, '232132')
  //     valueObj[item.tabLabel] = item.value;
  //   });
  // obj.value = valueObj;
  // instanceItemsLeft.value.push(obj);
};
watch(
  () => contentComps_left.value,
  (newVal, oldVal) => {
    instanceItemsLeft.value = [];
    newVal.length &&
      JSON.parse(JSON.stringify(newVal)).forEach((item: dataSourceType) => {
        let obj: dataSourceType = {};
        if (item.param) {
          //普通类
          obj.field = item.param;
          obj.value = (item.value || item.value === false) ? item.value : "";
          instanceItemsLeft.value.push(obj);
        } else {
          addInstanceItems(item);
        }
      });
  },
  { deep: true }
);
watch(
  () => contentComps_right.value,
  (newVal, oldVal) => {
    instanceItemsRight.value = [];
    newVal.length &&
      newVal.forEach((item: dataSourceType) => {
        let obj: dataSourceType = {};
        // let type = Array.isArray(item.value)
        // ? "array"
        // : typeof item.value == "object"
        //   ? "object"
        //   : "string";
        obj.field = item.param;
        obj.value = item.value || "";
        instanceItemsRight.value.push(obj);
      });
  },
  { deep: true }
);



onMounted(async () => {
  btnPerm.value = routerPerm();
  route.query.previewPerm == 1 ? previewPerm.value = true : previewPerm.value = false;
  getDetailAll();
  fetchChannelHasWorkflow(route.query.channelId);
});
</script>

<style lang="less" scoped>
.newContent {
  width: 100%;
  height: 100%;
  background: #f7f8fa;

  .newContentHead {
    padding: 0 24px;
    width: 100%;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .addButton {
      display: flex;
      align-items: center;

      .iconadd {
        font-size: 24px;
        margin-right: 4px;
      }
    }

    .newContentHead_right {
      display: flex;
    }
  }
  .ant-form {
    height: max-content;
  }
  .img-item {
    ::v-deep(.ant-form-item) {
      flex-direction: row;
    }
  }

  .contentCompsBox {
    position: relative;

    

    height: calc(100% - 190px);
    margin-top: 24px;
    display: flex;
    justify-content: center;
    overflow: hidden;

    .contentComps_left {
      position: relative;
      flex: 1;
      max-width: 920px;
      height: 100%;
      background: #fff;
      padding: 24px;
      overflow: auto;
      .noEdit {
      width: 100%;
      height: 10000px;
      position: absolute;
      top: 0;
      left: 0;
      // height: calc(100% - 190px);
      z-index: 600;
      background-color: transparent;
      overflow: auto;
    }
    }

    .contentComps_right {
      position: relative;
      margin-left: 24px;
      width: 280px;
      height: 100%;
      background: #fff;
      padding: 24px;
      overflow: auto;
      .noEdit {
      width: 100%;
      height: 10000px;
      position: absolute;
      top: 0;
      left: 0;
      // height: calc(100% - 190px);
      z-index: 600;
      background-color: transparent;
      overflow: auto;
    }
    }
  }
}
</style>
<style lang="less">
.newContent {
  .ant-form-item {
    display: flex;
    flex-direction: column;
    margin-left: 0 !important;

    .ant-form-item-label {
      width: auto;
      text-align: left;
    }

    .ant-form-item-control {
      flex: unset;
    }

    .ant-input-affix-wrapper {
      width: 100% !important;
      // padding-left: 0 !important;
    }
  }

  .basic-item_upload_list {
    display: flex;
    flex-wrap: wrap;

    .upload_list {
      margin-right: 24px;
    }

    .upload_list:nth-child(n + 2) {
      .ant-form-item-label {
        visibility: hidden;
      }
    }
  }

  .basic-item_item_list {
    display: flex;
    flex-wrap: wrap;

    .item_list {
      width: calc(50% - 12px);
    }

    .item_list:nth-child(2) {
      margin-left: 24px;
    }
  }

  .ant-form {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .publish_content {
    display: flex;
    align-items: center;

    .publish_action {
      display: flex;

      .ant-btn {
        margin-left: 8px;
      }
    }

    .publish_actions {
      display: flex;
    }
  }
}
</style>
